<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器代理工具 - Web 管理界面</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/static/assets/favicon.svg">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/assets/favicon-16x16.png">
    <link rel="shortcut icon" href="/static/assets/favicon.ico">
    <link rel="apple-touch-icon" href="/static/assets/favicon.svg">
    
    <!-- CSS样式文件 -->
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/css/components.css">
    <link rel="stylesheet" href="/static/css/responsive.css">
    <link rel="stylesheet" href="/static/css/logs.css">
    <link rel="stylesheet" href="/static/css/cert.css">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <h1>浏览器代理工具</h1>
            <p>通过 Web 界面管理代理服务器和配置规则</p>
            
            <!-- 导航选项卡 -->
            <nav class="nav-tabs">
                <button class="nav-tab active" onclick="showTab('dashboard')">控制面板</button>
                <button class="nav-tab" onclick="showTab('logs')">日志查看</button>
                <button class="nav-tab" onclick="showTab('cert')">证书配置</button>
            </nav>
        </header>

        <!-- 控制面板内容 -->
        <main id="dashboard-content" class="tab-content active">
            <!-- 状态监控 -->
            <section class="card">
                <h2>服务状态</h2>
                <div class="status-grid">
                    <div class="status-item" id="proxy-server-status">
                        <h3>代理服务器</h3>
                        <p id="proxy-server-text">检查中...</p>
                        <button class="btn" id="proxy-server-btn" onclick="toggleProxyServer()">启动</button>
                    </div>
                    <div class="status-item" id="system-proxy-status">
                        <h3>系统代理</h3>
                        <p id="system-proxy-text">检查中...</p>
                        <button class="btn" id="system-proxy-btn" onclick="toggleSystemProxy()">启用</button>
                    </div>
                </div>
            </section>

            <!-- 代理规则管理 -->
            <section class="card">
                <h2>代理规则</h2>
                <button class="btn success" onclick="showAddRuleModal()">添加规则</button>
                <div class="rules-list" id="rules-list">
                    <!-- 规则列表将通过 JavaScript 动态生成 -->
                </div>
            </section>
        </main>

        <!-- 日志查看内容 -->
        <section id="logs-content" class="tab-content">
            <div class="card">
                <h2>日志查看</h2>
                
                <!-- 日志过滤器 -->
                <div class="log-filters">
                    <div class="filter-row">
                        <div class="form-group">
                            <label for="log-rule-filter">按规则过滤</label>
                            <select id="log-rule-filter">
                                <option value="">全部规则</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="log-level-filter">日志级别</label>
                            <select id="log-level-filter">
                                <option value="">全部级别</option>
                                <option value="INFO">信息</option>
                                <option value="ERROR">错误</option>
                                <option value="DEBUG">调试</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="log-date-filter">日期过滤</label>
                            <input type="date" id="log-date-filter">
                        </div>
                        <div class="form-group">
                            <button class="btn" onclick="loadLogs()">刷新日志</button>
                            <button class="btn" onclick="clearLogFilters()">清除过滤</button>
                        </div>
                    </div>
                </div>
                
                <!-- 日志内容 -->
                <div class="log-container">
                    <div class="log-header">
                        <span>时间</span>
                        <span>级别</span>
                        <span>内容</span>
                    </div>
                    <div class="log-content" id="log-content">
                        <div class="log-loading">加载中...</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 证书安装指导内容 -->
        <section id="cert-content" class="tab-content">
            <div class="card">
                <h2>HTTPS证书配置</h2>
                <div class="cert-info">
                    <div class="alert" style="background: #fff3cd; color: #856404; border: 1px solid #ffeaa7;">
                        <h3>⚠️ 为什么需要安装证书？</h3>
                        <p>当代理服务器拦截HTTPS流量时，它会使用自己的证书。浏览器默认不信任这个证书，所以会显示"连接不是专用连接"的警告。</p>
                        <p>安装mitmproxy的CA证书后，浏览器就会信任代理服务器的证书，从而正常访问HTTPS网站。</p>
                    </div>
                    
                    <div class="cert-status">
                        <h3>📋 证书状态</h3>
                        <div id="cert-status-info">检查中...</div>
                    </div>
                    
                    <div class="cert-instructions">
                        <h3>🔧 安装步骤</h3>
                        
                        <div class="install-method">
                            <h4>方法一：自动安装（推荐）</h4>
                            <div class="code-block">
                                <code>python install_cert.py</code>
                                <button class="btn btn-small" onclick="copyToClipboard('python install_cert.py', this)">复制</button>
                            </div>
                            <p>在项目目录下运行此命令，工具会自动检测系统并安装证书。</p>
                        </div>
                        
                        <div class="install-method">
                            <h4>方法二：手动安装</h4>
                            <div class="manual-steps" id="manual-steps">
                                <!-- 手动安装步骤将通过JavaScript动态生成 -->
                            </div>
                        </div>
                        
                        <div class="install-method">
                            <h4>方法三：仅HTTP代理（临时解决）</h4>
                            <p>如果只需要代理HTTP流量，可以在浏览器中只设置HTTP代理，不设置HTTPS代理。</p>
                            <div class="proxy-settings">
                                <p><strong>代理设置：</strong></p>
                                <ul>
                                    <li>HTTP代理: 127.0.0.1:8080</li>
                                    <li>HTTPS代理: 留空或禁用</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="cert-download">
                        <h3>📥 证书文件下载</h3>
                        <p>证书文件位置: <code id="cert-path">~/.mitmproxy/mitmproxy-ca-cert.pem</code></p>
                        <button class="btn" onclick="downloadCertificate()">下载证书文件</button>
                        <button class="btn" onclick="openCertDirectory()">打开证书目录</button>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 添加/编辑规则模态框 -->
    <div class="modal" id="rule-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-title">添加规则</h3>
                <button class="close" onclick="hideRuleModal()">&times;</button>
            </div>
            <form id="rule-form">
                <!-- curl导入区域 -->
                <div class="form-group curl-import-section">
                    <div class="curl-import-header" onclick="toggleCurlImportSection()">
                        <label>📋 从 cURL 命令导入</label>
                        <span class="toggle-icon" id="curl-toggle-icon">▼</span>
                    </div>
                    <div class="curl-import-content" id="curl-import-content">
                        <div class="form-group">
                            <label for="curl-command">cURL 命令</label>
                            <textarea id="curl-command" name="curl_command" rows="3" placeholder='粘贴 cURL 命令，例如:
curl "https://api.example.com/users" -H "Authorization: Bearer token" -H "Content-Type: application/json"'></textarea>
                            <div class="curl-buttons">
                                <button type="button" class="btn btn-small" onclick="parseCurlCommand()">解析并填充表单</button>
                                <button type="button" class="btn btn-small success" onclick="executeCurlAndFillMock()">执行并获取Mock数据</button>
                            </div>
                        </div>
                        <div class="curl-help">
                            <small>
                                💡 提示：粘贴 cURL 命令后，点击"解析并填充表单"自动填充规则字段，或点击"执行并获取Mock数据"直接获取API响应作为Mock内容。
                            </small>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="pattern">匹配模式</label>
                    <input type="text" id="pattern" name="pattern" placeholder="例如: api.example.com" required>
                </div>
                
                <div class="form-group">
                    <label for="pattern_type">匹配类型</label>
                    <select id="pattern_type" name="pattern_type" onchange="togglePatternTypeFields()">
                        <option value="string">字符串匹配</option>
                        <option value="regex">正则表达式</option>
                    </select>
                    <small class="form-help" id="pattern-help">
                        字符串匹配: 检查URL中是否包含指定字符串<br>
                        正则表达式: 使用正则表达式进行灵活的URL匹配
                    </small>
                </div>
                
                <!-- 正则表达式辅助工具 -->
                <div class="form-group" id="regex-tools" style="display: none;">
                    <div class="regex-helper">
                        <div class="regex-test">
                            <label>正则表达式测试</label>
                            <div class="regex-test-input">
                                <input type="text" id="regex-test-url" placeholder="输入测试URL，例如: https://api.example.com/users/123">
                                <button type="button" class="btn btn-small" onclick="testRegexPattern()">测试匹配</button>
                            </div>
                            <div class="regex-test-result" id="regex-test-result"></div>
                        </div>
                        
                        <div class="regex-examples">
                            <label>常用正则表达式模板</label>
                            <div class="regex-templates">
                                <button type="button" class="btn btn-small" onclick="insertRegexTemplate('^https?://api\\\\.example\\\\.com/.*')">API域名匹配</button>
                                <button type="button" class="btn btn-small" onclick="insertRegexTemplate('^https?://.*\\\\.example\\\\.com/users/\\\\d+$')">用户ID匹配</button>
                                <button type="button" class="btn btn-small" onclick="insertRegexTemplate('^https?://[^/]+/api/v[12]/.*')">API版本匹配</button>
                                <button type="button" class="btn btn-small" onclick="insertRegexTemplate('\\\\.(jpg|png|gif|svg)$')">图片文件匹配</button>
                            </div>
                        </div>
                        
                        <div class="regex-syntax">
                            <label>正则表达式语法提示</label>
                            <div class="syntax-help">
                                <code>^</code> 开始, <code>$</code> 结束, <code>\\.</code> 点号, <code>\\d</code> 数字, <code>.*</code> 任意字符, <code>(a|b)</code> a或b
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="rule_type">规则类型</label>
                        <select id="rule_type" name="rule_type" onchange="toggleRuleTypeFields()">
                            <option value="proxy">代理转发</option>
                            <option value="mock">Mock响应</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="enabled">启用状态</label>
                        <select id="enabled" name="enabled">
                            <option value="true">启用</option>
                            <option value="false">禁用</option>
                        </select>
                    </div>
                </div>
                
                <!-- 代理规则字段 -->
                <div id="proxy-fields">
                    <div class="form-group">
                        <label for="strip_prefix">去除前缀 (可选)</label>
                        <input type="text" id="strip_prefix" name="strip_prefix" placeholder="例如: /api">
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="scheme">协议</label>
                            <select id="scheme" name="scheme">
                                <option value="http">HTTP</option>
                                <option value="https">HTTPS</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="port">目标端口</label>
                            <input type="number" id="port" name="port" placeholder="例如: 8000">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="host">目标主机</label>
                        <input type="text" id="host" name="host" placeholder="例如: 127.0.0.1">
                    </div>
                </div>
                
                <!-- Mock规则字段 -->
                <div id="mock-fields" style="display: none;">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="mock_status">HTTP状态码</label>
                            <input type="number" id="mock_status" name="mock_status" placeholder="200" value="200" min="100" max="599">
                        </div>
                        <div class="form-group">
                            <label for="mock_data_source">数据源</label>
                            <select id="mock_data_source" name="mock_data_source" onchange="toggleMockDataFields()">
                                <option value="inline">内联内容</option>
                                <option value="file">外部文件</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mock_content_type">内容类型</label>
                        <select id="mock_content_type" name="mock_content_type">
                            <option value="application/json">application/json</option>
                            <option value="text/html">text/html</option>
                            <option value="text/plain">text/plain</option>
                            <option value="application/xml">application/xml</option>
                        </select>
                    </div>
                    <div class="form-group" id="mock-inline-field">
                        <label for="mock_content">Mock内容</label>
                        <textarea id="mock_content" name="mock_content" rows="4" placeholder='{"message": "Hello from Mock API"}'></textarea>
                    </div>
                    <div class="form-group" id="mock-file-field" style="display: none;">
                        <label for="mock_content_file">Mock文件路径</label>
                        <input type="text" id="mock_content_file" name="mock_content_file" placeholder="./mocks/users.json">
                    </div>
                    <div class="form-group">
                        <label for="mock_headers">自定义响应头 (可选，JSON格式)</label>
                        <textarea id="mock_headers" name="mock_headers" rows="2" placeholder='{"X-Mock": "true", "Cache-Control": "no-cache"}'></textarea>
                    </div>
                </div>
                <div style="text-align: right;">
                    <button type="button" class="btn" onclick="hideRuleModal()">取消</button>
                    <button type="submit" class="btn success">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- curl解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/curl-parser-js@0.0.3/dist/parse-curl.js"></script>
    
    <!-- JavaScript文件 -->
    <script src="/static/js/main.js"></script>
    <script src="/static/js/api.js"></script>
    <script src="/static/js/ui.js"></script>
    <script src="/static/js/utils.js"></script>
    <script src="/static/js/curl-parser.js"></script>
</body>
</html>